<template>
    <div class="container_box">
        <div class="header">
            <div class="dropdown">
                <el-dropdown trigger="click" size="mini">
                    <img src="../assets/logo.png" alt="">
                    <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item>个人中心</el-dropdown-item>
                        <el-dropdown-item @click.native="goBack">退出</el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>
            </div>
        </div>
        <div class="sideBar">
            <el-menu
                    default-active="category"
                    class="el-menu-vertical-demo"
                    unique-opened
                    background-color="#545c64"
                    text-color="#fff"
                    router
                    active-text-color="#ffd04b">
                <el-submenu :index="item.id+''" v-for="item in userMsg.role" :key="item.id">
                    <template slot="title">
                        <i :class="item.icon"></i>
                        <span>{{item.authName}}</span>
                    </template>
                    <el-menu-item :index="subItem.path" v-for=" subItem  in item.children" :key="subItem .id">
                        {{subItem .authName}}
                    </el-menu-item>
                </el-submenu>
            </el-menu>
        </div>
        <div class="main">
            <router-view></router-view>
        </div>
    </div>
</template>

<script>
    import {mapState,mapGetters} from 'vuex'

    export default {
        name: "Home",
        data(){
            return{
             menuList:[]
            }
        },
        methods: {
            goBack() {
                localStorage.removeItem('userToken')
                this.$router.push('/login')
            }
        },
        computed: {
            ...mapState('user', ['userMsg','userToken']),
            // ...mapGetters('user',['getToken'])
        }
    }
</script>

<style scoped lang="less">
    .container_box {
        position: relative;
        height: 100%;

        .header {
            height: 70px;
            background: grey;
        }

        .sideBar {
            position: absolute;
            top: 70px;
            left: 0;
            width: 250px;
            bottom: 0;
       
        }

        .main {
            position: absolute;
            left: 250px;
            top: 70px;
            right: 0;
            bottom: 0;
           
        }
    }

    .dropdown {
        position: absolute;
        top: 10px;
        right: 0;
        height: 50px;
        width: 50px;
        border-radius: 50%;
        padding: 2px;
        background: #fff;
        border: 2px solid #eee;
        box-shadow: 0 0 10px #ddd;

        img {
            width: 100%;
            height: 100%;
            border-radius: 50%;
        }
    }

    .el-menu {
        height: 100%;
        border-right: none;
    }
</style>